<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>时间戳自动转换</title>
    
        
    <!-- Site CSS -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!--<link href="http://static.bootcss.com/www/assets/css/site.min.css?v5" rel="stylesheet">-->
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/assets/js/html5shiv.min.js?v=1f65f1e951"></script>
      <script src="/assets/js/respond.min.js?v=1f65f1e951"></script>
    <![endif]-->
    
</head>
<body>
 <div class="container">
       <h2>时间戳自动转换</h2>
   
    <div class="row">
        <div class="col-sm-12">
            <textarea id="text" class="form-control" rows="10">{"userId":"2011432031","owner":false,"admin":false,"joinTime":1427614325080,"leaveTime":0}</textarea>
        </div>
    </div>
    
    <div class="row">
        <div class="col-sm-12">
           <button id="btn" class="btn btn-primary"  >转</button>
        </div>
    </div>
    
       <div class="row">
        <div class="col-sm-12">
             <textarea id="show" class="form-control" rows="10"></textarea>
        </div>
    </div>
   
   <hr>
  
   
 </div>

   
       <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   <script type="text/JavaScript">
 String.prototype.lookupJson=function(fn){//不保证完全符合，但基本json还能完整个抠出
	fn = fn || function (json){console.log("jsonxxx="+json);}
	var stack=[];
	stack.peek=function(){
	//console.log("length="+this.length+",this[0]="+this[0]);
		if(this.length > 0){
			return this[this.length-1];
		}
	}
	var pair='{}[]"\'';
	var startIndex=-1;

	for(var i=0;i<this.length;i++){
		var code=this.charAt(i);
		var codePos=pair.indexOf(code);

		if(codePos < 0){
			continue;
		}
 
		var top=stack.peek();

		var topPos=pair.indexOf(top);//-1
		 // console.log('code='+code+',top='+top);
		 // console.log('codePos='+codePos+',topPos='+topPos);
		if(stack.length < 1){//
 			 stack.push(code);
 			 startIndex = i;
		}else if( (codePos-topPos) == 0){//"'
			// console.log("--");
			stack.pop();
		}else if( topPos > -1 && (codePos-topPos) == 1 ){//退出
			stack.pop();
			if(	stack.length < 1 &&  startIndex >-1){
				var json=this.substring(startIndex,i+1);
				fn(json);
				startIndex = -1;
			}
		}else{
			stack.push(code);
		}
 		// console.log("stack:"+stack.join());
	}

	// console.log("stack:"+stack.join());
}

       function debug(w,t){
          // if(t)console.log(t+'======');
          // console.log(w);
       }
   
       var $text =$('#text');
        var $show =$('#show');
        var handler=function(){
        //   var arr= $text.val().split("\n");
          var obj={};
          var keys=[];
        
        
        //               //collect keys
        //   arr=$.map(arr,function(e){
              
        //         debug(arguments,"arguments");
        //       var json = $.parseJSON(e);
        //       $.each(json,function(k,v){
                   
        //           if(obj[k]){
                      
        //           }else{
        //               obj[k]=true;
        //               keys.push(k);
        //           }
        //       });
              
        //       return json;
        //   });
          var arr=[];
          $text.val().lookupJson(function(jsonstr){
              var json = $.parseJSON(jsonstr);
              
                $.each(json,function(k,v){
                   
                  if(obj[k]){
                      
                  }else{
                      obj[k]=true;
                      keys.push(k);
                  }
              });
              
              arr.push(json);
              
          })
          
          
           debug(arr,"arr");
            debug(keys,"keys");
          //draw table
           arr= $.map(arr,function(e){
                var json = e;
                var line=[];
                $.each(keys,function(){
                  if(json[this]){
                      line.push('"\''+json[this]+'"');
                  }else{
                      line.push('"\'null"');
                  }
              });
              debug(line,"line");
              return line.join("\t");
            });
            arr.unshift(keys.join("\t"));
            $show.val(arr.join("\n"));
            
            
        };
        $text.change(handler);
        $('#btn').click(handler);
        
       
       
       
   </script>
</body>

</html>